<template>
  <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="ID" label="#" width="80"></el-table-column>
      <el-table-column prop="username" label="用户" width="150"></el-table-column>

      <el-table-column prop="operation_type" label="操作类型" width="150"></el-table-column>
      <el-table-column prop="request_address" label="请求地址" width="180"></el-table-column>
      <el-table-column prop="api" label="请求接口"></el-table-column>
      <el-table-column prop="create_at" label="时间" width="180"></el-table-column>

      <!-- <el-table-column prop="request_address" label="地址"></el-table-column> -->
    </el-table>
    <div style="margin-top: 10px;">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @next-click="nextChange"
          @prev-click="prevChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { HistoryAll } from "@/utils/http";
export default {
  data() {
    return {
      tableData: [],
      limit: 1,
      page: 10,
      loading: false, // 加载动画
      total: 0,
      currentPage4: 1 // 前往第几页
    };
  },
  methods: {
    history() {
      this.loading = true;
      HistoryAll(this.limit, this.page)
        .then(res => {
          if (res.data.code == 200) {
            this.tableData = res.data.data;
            this.total = res.data.Count;

            this.loading = false;
          } else {
            this.$message({
              message: res.data.message,
              type: "warning",
              center: true
            });
            this.loading = false;
          }
        })
        .catch(err => {
          this.$message.error(err.message);
          this.loading = false;
        });
    },
    // 一页显示多少条数据
    handleSizeChange(val) {
      this.loading = true;
      HistoryAll(this.limit, val)
        .then(res => {
          if (res.data.code == 200) {
            this.tableData = res.data.data;
            this.total = res.data.Count;

            this.loading = false;
          } else {
            this.$message({
              message: res.data.message,
              type: "warning",
              center: true
            });
            this.loading = false;
          }
        })
        .catch(err => {
          this.$message.error(err.message);
          this.loading = false;
        });
    },
    // 下一页
    nextChange() {
      this.limit += this.page;
      this.history();
    },
    // 上一页
    prevChange(val) {
      if (val == 1) {
        this.limit = 1;
      } else {
        this.limit = this.page - 10;
      }
      this.history();    },
    handleCurrentChange(val) {
      if (val == 1) {
        this.limit = 1;
      } else {
        this.limit = this.limit + 10;
      }
      this.history();    }
  },

  mounted() {
    this.history();
  }
};
</script>

<style>
</style>